import { dom } from "../tool";
import ColorSelect from "./ColorSelect";
import IconSelect, { IconMap } from './Icon/select';
import Select from "./Select";

interface BorderType {
    border?: string;
    borderLeft?: string;
    borderTop?: string;
    borderRight?: string;
    borderBottom?: string;
}

interface PropsType {
    value?: string | null;
    onChange?: (value: BorderType) => void;
    target?: HTMLElement;
    label?: string | HTMLElement;
    style?: string;
    className?: string;
}

interface BorderSetType {
    new(props?: PropsType): BorderSetType;
    value?: string | null;
    setValue: (value: string | null | undefined) => void;
    onChange?: (value: BorderType) => void;
    render: (node?: HTMLElement) => void;
}
const iconList: IconMap[] = [
    {
        key: "border",
        icon: "BorderOutIcon"
    },
    {
        key: "borderLeft",
        icon: "BorderLeftIcon"
    },
    {
        key: "borderTop",
        icon: "BorderTopIcon"
    },
    {
        key: "borderRight",
        icon: "BorderRightIcon"
    },
    {
        key: "borderBottom",
        icon: "BorderBottomIcon"
    }
]

const typeList: any[] = [
    {
        key: 'solid',
        title: '实线'
    },
    {
        key: 'dashed',
        title: '虚线'
    },
    {
        key: 'dotted',
        title: '点线'
    },
    {
        key: 'double',
        title: '双实线'
    },
    {
        key: 'groove',
        title: '凹槽'
    },
    {
        key: 'inset',
        title: '内凹'
    },
    {
        key: 'outset',
        title: '外凸'
    },
    {
        key: 'ridge',
        title: '脊线'
    }
]
function BorderSet(this: BorderSetType, props?: PropsType) {
    const { value, onChange, target, label, style, className } = props || {};
    this.onChange = onChange;
    let bPosition: any = "border";
    let prePosition: string = "border";
    let bSize: any = null;
    let bType: any = null;
    let bColor: any = null;
    const change = () => {
        const obj: any = {};
        if (this.onChange) {
            obj[prePosition] = "0";
            this.onChange(obj);
            obj[prePosition] = undefined;
            if (bPosition && bSize && bType && bColor) {
                obj[bPosition] = String(bSize).concat("px ").concat(bType).concat(" ").concat(bColor);
            } else {
                obj.border = "0";
            }
            this.onChange(obj);
        }
    }
    let container = dom('div', {
        target,
        style,
        className
    });
    if (label) {
        if (label instanceof Node) {
            container.appendChild(dom('label', { child: label }));
        } else {
            container.appendChild(dom('label', { innerText: label }));
        }
    }
    const borderSelect = new IconSelect({
        iconList,
        target: dom('div', { target: container, style: 'display:inline-block; width: 100px;' }),
        onChange: (arg) => {
            bPosition = arg;
            change();
        }
    });
    const div = dom('div', { target: container, style: 'display: inline-block;' });
    const sizeInput: any = dom('input', { target: div, className: 'gkh-input', style: 'width: 34px' });
    sizeInput.onchange = () => {
        bSize = parseInt(sizeInput.value);
        change();
    }
    const typeSelect = new Select({
        data: typeList, target: div, onChange: (arg) => {
            bType = arg;
            change();
        }
    });
    const color = new ColorSelect({
        showType: 'backgroundColor', target: div, children: dom('div', { style: "width: 12px; height: 12px; box-shadow: #b6b6b6 0 0 2px;" }), onChange: (arg) => {
            bColor = arg;
            change();
        }
    });

    this.setValue = (value) => {
        if (value) {
            let arr1: string[] = value.split(":");
            let str = arr1[0];
            let n = str.indexOf(" ");
            if (n == 0) {
                str = str.substring(1);
            } else if (n > 0) {
                str = str.substring(0, str.length - 1);
            }
            bPosition = str;
            str = arr1[1];
            n = str.indexOf(' rgb');
            if (n > -1) {
                bColor = str.substring(n + 1);
                str = str.substring(0, n);
                n = str.lastIndexOf(" ");
                bSize = parseInt(str.substring(0, n));
                bType = str.substring(n + 1);
            } else {
                arr1 = str.split(" ");
                for (let i = 0; i < arr1.length; i++) {
                    if (arr1[i].indexOf('px') > -1) {
                        bSize = parseInt(arr1[i]);
                    } else if (arr1[i].indexOf("#") > -1) {
                        bColor = arr1[i];
                    } else {
                        bType = arr1[i];
                    }
                }
            }
            prePosition = bPosition;
        } else {
            prePosition = "border";
            bPosition = null;
            bSize = null;
            bType = 'solid';
            bColor = '#000000';
        }
        borderSelect.setValue(bPosition);
        sizeInput.value = bSize;
        typeSelect.setValue(bType);
        color.setValue(bColor);
    }
    this.setValue(value);
    this.render = (node) => {
        if (node instanceof Node) {
            node.appendChild(container);
        }
        return container;
    }

    return this;
}

export default BorderSet as unknown as BorderSetType;